<template>
	<view class="loader" :style="getLoadingStyle">
		<view class="loader-inner ball-pulse">
			<view></view>
			<view></view>
			<view></view>
		</view>
	</view>

</template>

<script>
	import filter from '../../common/js/filter'
	export default{
		props:{
			//圆圈颜色
			backColor:{
				default:'black'
			},
			
			//圆圈大小
			size:{
				default:'15px'
			}
			
		},
		computed:{
			getLoadingStyle(){
				let style = {}
				style['--ball-pluse-background'] = this.backColor
				style['--ball-pluse-size'] = this.size
				return filter.compatibleStyles(style)
			}
		},
	}
</script>

<style lang="less" scoped>
	@keyframes ball-grid-pulse {
		0% {
			-webkit-transform: scale(1);
			transform: scale(1);
		}

		50% {
			-webkit-transform: scale(0.5);
			transform: scale(0.5);
			opacity: 0.7;
		}

		100% {
			-webkit-transform: scale(1);
			transform: scale(1);
			opacity: 1;
		 }
		}
		
		.loader{
			--ball-pluse-size:25px;
			--ball-pluse-background:'black';
		}



		.ball-pulse>view:nth-child(1) {
			-webkit-animation: ball-grid-pulse 0.75s 0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
			animation: ball-grid-pulse 0.75s 0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
		}

		.ball-pulse>view:nth-child(2) {
			-webkit-animation: ball-grid-pulse 0.75s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08);
			animation: ball-grid-pulse 0.75s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08);
		}

		.ball-pulse>view:nth-child(3) {
			-webkit-animation: ball-grid-pulse 0.75s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08);
			animation: ball-grid-pulse 0.75s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08);
		}

		.ball-pulse>view {
			width: var(--ball-pluse-size);
			height: var(--ball-pluse-size);
			background-color: var(--ball-pluse-background);
			border-radius: 100%;
			margin: 2px;
			-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
			display: inline-block;
		}
</style>